<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="角色名称" prop="roleName" align="center"/>
      <el-table-column label="用户姓名" prop="userName" align="center"/>
      <el-table-column label="手机号码" prop="phonenumber" align="center"/>
      <el-table-column label="数据权限" prop="factory" align="center"/>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.factory"> 已分配 </span>
          <span v-else> 未分配 </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-circle-check"
            @click="authFactory(scope.row)"
            v-hasPermi="['system:role:add']"
          >授权分配</el-button>
        </template>
      </el-table-column>
    </el-table>
    <select-factory ref="select" :queryParamsSelect="queryParams" :userId="queryParams.userId" @ok="handleQuery" />
  </div>
</template>

<script>
import { roleUserFactoryList } from "@/api/system/dataScope";
import selectFactory from "./selectFactory";
export default {
  name: "dataScope",
  components: { selectFactory },
  data() {
    return {
      loading: true,
      dataList: [],
      // 查询参数
      queryParams: {
        roleId: '',
        userId: ''
      }
    }
  },
  created() {
    const roleId = this.$route.params && this.$route.params.roleId;
    if (roleId) {
      this.queryParams.roleId = roleId
      this.getList()
    }
  },
  methods: {
    getList() {
      this.loading = true;
      roleUserFactoryList(this.queryParams).then(response => {
        this.dataList = response.data;
        this.loading = false;
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList();
    },
    authFactory(row) {
      this.queryParams.userId = row.userId
      this.$refs.select.show();
    }
  }
}
</script>

<style scoped>

</style>
